<template>
	<!-- 应收返点统计 -->
	<div>
		<p class="name">
			{{ getFormateDate(detailData.reportDate)
			}}{{ $t('funds.fund_audit.received_rebate_statistics') }}
		</p>
		<div class="block-content">
			<el-table
				v-loading="proxyRebateLoading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				:data="proxyRebateList"
				style="width: 100%"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					align="center"
					:label="`${$t('funds.proxy_name')}`"
					prop="proxyName"
				>
					<template slot-scope="scope">
						{{ scope.row.proxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('funds.fund_audit.rebate_state')"
					prop="payoutStatus"
				>
					<template slot-scope="scope">
						{{
							typeFilter(
								scope.row.payoutStatus,
								'proxyPayoutStatus'
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="
						`${$t(
							'funds.proxy_member_funds_record.person_rebate_amount'
						)}`
					"
					prop="personRebateAmount"
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.personRebateAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="
						`${$t(
							'funds.proxy_member_funds_record.child_rebate_amount'
						)}`
					"
					prop="childRebateAmount"
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.childRebateAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="
						`${$t(
							'funds.proxy_member_funds_record.rebate_amount_point'
						)}`
					"
					prop="rebateAmount"
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.rebateAmount
							)
						}}
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		detailData: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			proxyRebateLoading: false,
			proxyRebateList: []
		}
	},
	watch: {
		// detailData: {
		// 	handler(val) {
		// 		if (val.proxyId) {
		// 			this.getProxyRebateDetailList()
		// 		}
		// 	},
		// 	immediate: true,
		// 	deep: true
		// }
	},
	created() {
		if (this.detailData?.proxyId) {
			this.getProxyRebateDetailList()
		}
	},
	methods: {
		// 本期返点明细
		getProxyRebateDetailList() {
			this.proxyRebateLoading = true
			this.proxyRebateList = []
			const params = {
				pageNum: this.pageNum,
				pageSize: 1000,
				reportEndDate: this.detailData.reportDate,
				reportStartDate: this.detailData.reportDate,
				proxyId: this.detailData.proxyId
			}
			this.$api
				.getProxyRateDetailPageAPI(params)
				.then((res) => {
					this.proxyRebateList = res?.data?.record || []
					this.proxyRebateLoading = false
				})
				.catch(() => {
					this.proxyRebateLoading = false
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.name {
	font-weight: 600;
	font-size: 20px;
	color: #303133;
}
.block-content {
	position: relative;
	width: 100%;
	margin-top: 10px;
	word-break: break-all;
}
</style>
